<template>
  <div class="activity-details">
  	<!-- 饮食介绍 -->
  	<img v-if="activity.img" class="info-img" :src=" activity.img">
  	<div class="info-p">
  		<p class="title">{{activity.title}}</p>
  		<p class="time">{{activity.create_time | formatDate}}</p>  	    
      <!-- <div class="share" v-if="!phone">        
        <span>
          <img src="@/assets/kechenxiangqing2.png"> 分享给朋友
        </span>
        <span>
          <img src="@/assets/kechenxiangqing3.png"> 我的二维码
        </span>
      </div> -->
      <div class="share"  @click="buy_audios">
        <span @click="mask_show = !mask_show, code = false, fenxiang = true">
          <img src="@/assets/kechenxiangqing2.png"> 分享给朋友
        </span>
        <span @click="share_qrcode">
          <img src="@/assets/kechenxiangqing3.png"> 我的二维码
        </span>
      </div>
	    <div class="edit-article" v-html="activity.content">
	    </div>
      <div class="reward">
        <p class="tip">感谢您的支持，我们会继续努力的！ </p>
        <span class="reward-btn" @click="reward.reward_show = true">打赏</span>
      </div>
  	</div>
  	<div class="mask" :class="(mask_show) ? 'active' : ''" @click="mask_show = !mask_show, fenxiang = !fenxiang">
  		<img v-if="fenxiang" class="fenxiang-img" src="@/assets/fenxiang.png">
  		<div v-if="code" class="code">
  			<p class="title">长按图片分享给好友，好友可通过二维码加入我们</p>
  			<div v-if="loading" class="loading">
          <img src="@/assets/jika10.png" alt="">
          <p>加载中...</p>
  			</div>
        <div class="share-img" v-else>
          <img :src="shareUrl">
        </div>
  		</div>
  	</div>
    <reward-card :reward = "reward"></reward-card>
  </div>
</template>

<script>
import { get_activity_show, baseUrl } from '@/api/api'
import { AlertModule } from 'vux'
import axios from 'axios'
import { formatDate } from '@/util/date.js'
import rewardCard from '@/components/reward'

export default {
  components:{
    rewardCard
  },
	filters:{
    formatDate(time){
      if(!time){return}
      let date = new Date(time*1000);
      return formatDate(date,'yyyy.MM.dd');
    }
	},
  data () {
    return {
    	mask_show: false,
    	fenxiang: true,
    	code: true,
    	activity: {},
    	baseUrl,
      shareUrl: '',
      loading: true,
      phone: '',
      reward: {},
    }
  },
  created () {
  	this.activity_id = this.$route.query.activity_id
  	this.get_activity_shows() 
  },
  methods: {  
    share_qrcode () {
      this.share()
      this.mask_show = !this.mask_show
      this.code = true
      this.fenxiang = false
    },
    buy_audios () {
      if(!sessionStorage.phone){
        this.$router.push({path: './bindPhone'})
        return
      }
    },
    share () {
      if(sessionStorage.uid && !sessionStorage.shareUrl){
        axios.post('http://m.aihera.cn/index.php/home/poster/create_poster/uid/'+sessionStorage.uid).then((res) => {
          if(res.data.status == 1){            
            sessionStorage.setItem('shareUrl', res.data.info)
            this.shareUrl = sessionStorage.shareUrl
            if(sessionStorage.shareUrl){
              this.loading = false
              this.shareUrl = sessionStorage.shareUrl
            }else{
              this.loading = true
            }
          }
        }).catch((response) => {
          sessionStorage.removeItem('shareUrl')
          AlertModule.show({
            title: '系统提示',
            content: err.response.data.message
          })
        })
      }else{
        this.loading = false
        this.shareUrl = sessionStorage.shareUrl
      }  
    },  
    router (path) {
      this.$router.push(path)
    },
    get_activity_shows () {
    	get_activity_show(this.activity_id).then((res) => {
    		this.activity = res.data.info
        this.reward = {
          reward_show: false,
          title: this.activity.title
        }
    	}).catch((err) => {
    		console.dir(err)
    	})
    },
    // 获取手机号码，
  }
}
</script>
<style lang="stylus" scoped>
  .activity-details
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    .info-p
      background-color #fff
      margin-bottom 1rem
      padding-top 2rem
      .title
        line-height 2.4rem
        font-size 1.5rem
        color #333
        font-weight bold
        padding 0 1.5rem
      .time
        color #999
        font-size 1.3rem
        margin-top 1.5rem
        padding 0 1.5rem
      .share
        display flex
        border-top 1px solid #e5e5e5
        border-bottom 1px solid #e5e5e5
        padding 1rem 1.5rem
        margin-top 2rem
        span
          flex 1
          display block
          font-size 1.3rem
          color #333
          img
            width 2.4rem
            display inline-block
            vertical-align middle
            margin-right 1rem
      .edit-article
        padding 0 1.5rem
        padding-top 3rem
        p
          margin-bottom 3rem
          font-size 1.3rem
          color #666
          line-height 2.4rem
    .mask.active
      display block
    .mask
      position fixed
      top 0
      left 0
      width 100%
      background-color rgba(0,0,0,.6)
      height 100vh
      overflow hidden
      display none
      img.fenxiang-img
        width 73%
        float right
        margin-top 1rem
        margin-right 1.8rem
      p.title
        text-align center
        line-height 4rem
        color #fff
        font-size 1.3rem
      .loading
        img
          width 6rem
          margin-left -3rem
          left 50%
          position relative
          top 16rem
          animation foguangMove 1s infinite linear
        p
          color #fff
          font-size 1.8rem
          top 18rem
          position relative
          text-align center
      .share-img
        margin 0 1.5rem
        background-color #fff
        position relative
        .er-code
          position absolute
          right 1.5rem
          background-color #fff
          padding .5rem
          width 7.4rem
          height 7.4rem
          border-radius .4rem
          bottom 7rem
        .person
          display flex
          padding 2rem 1.5rem
          img
            max-width 7rem
            max-height 7rem
            margin-right 1.5rem
          .con
            position relative
            h3
              font-size 1.7rem
              color #FF659B
              line-height 1.6rem
            p
              font-size 1.2rem
              color #333
              width 15rem
              position absolute
              bottom .5rem  
    .reward
      margin-top 1rem
      background-color #fff
      text-align center
      padding-top 2.5rem
      padding-bottom 4rem
      .tip
        color #666
        font-size 1.2rem
        margin-bottom 1.5rem
      .reward-btn
        border 1px solid #ff659b
        height 2.5rem
        line-height 2.5rem
        text-align center
        width 8rem
        border-radius 100px
        color #ff659b
        font-size 1.2rem
        display inline-block
</style>